<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>特殊布局</title>
 <style>
  .container {
   width: 1024px;
   margin: 0 auto;
   margin-bottom: 20px;
   background-color: #fff;
  }

  .grid-demo_1 {
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(5,100px);
   grid-template-rows: repeat(3,100px);
   grid-auto-rows: 100px;
   place-content: center;
  }

  .grid-demo_1 .item {
   border: 1px solid #c7c2c28a;
   text-align: center;
   align-content: center;
   border-radius: 5px;
  }

  .grid-demo_1 .item1 {
   grid-column: 1/3;
   grid-row: 1/3;
   background-color: antiquewhite;
  }

  .grid-demo_1 .item2 {
   grid-column: 3/5;
   grid-row: 1/3;
   background-color: aquamarine;
  }

  .grid-demo_1 .item3 {
   grid-column: 1/2;
   grid-row: 3/4;
   background-color: chartreuse;
  }

  .grid-demo_1 .item4 {
   grid-column: 2/3;
   grid-row: 3/4;
   background-color: brown;
  }

  .grid-demo_1 .item5 {
   grid-column: 3/4;
   grid-row: 3/4;
   background-color: cornflowerblue;
  }

  .grid-demo_1 .item6 {
   grid-column: 4/5;
   grid-row: 3/4;
   background-color: darkblue;
  }

  .grid-demo_1 .item7 {
   grid-column: 5/6;
   grid-row: 1/2;
   background-color: darkgrey;
  }

  .grid-demo_1 .item8 {
   grid-column: 5/6;
   grid-row: 2/3;
   background-color: darkorange;
  }

  .grid-demo_1 .item9 {
   grid-column: 5/6;
   grid-row: 3/4;
   background-color: darkslateblue;
  }

  .block {
   display: block;
  }
 </style>
</head>

<body>
 <div class="container">
  <div class="grid-demo_1">
   <div class="item item1">1</div>
   <div class="item item2">2</div>
   <div class="item item3">3</div>
   <div class="item item4">4</div>
   <div class="item item5">5</div>
   <div class="item item6">6</div>
   <div class="item item7">7</div>
   <div class="item item8">8</div>
   <div class="item item9">9</div>
  </div>

  <div class="reference">
   <h3>参考</h3>
   <a class="block" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid" target="_blank">1. MDN grid布局</a>
   <a class="block" href="https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html" target="_blank">2. CSS Grid 网格布局教程</a>
  </div>
 </div>
</body>

</html>